<template>
	<view>
		<view class="tabs-box">
			<u-tabs :list="list1" @change="changeTab" :current="currTab"></u-tabs>
		</view>
		<view class="content" v-show="isEdit">
			<u--form labelPosition="left" :model="requserData" :rules="rules" ref="form2" :style="{width: '95%' }"
				class="content">
				<view class="title">基本信息</view>
				<u-form-item :labelWidth="15" prop="nickName" borderBottom>
					<view class="input-box">
						<input maxlength="10" v-model="requserData.nickName" class="uni-input" type="number"
							placeholder="请输入昵称" placeholder-style="font-weight: 600"
							@blur="requserData.nickName = requserData.nickName.replace(/\s*/g,'')"></input>
						<u-icon name="close-circle" size="14" @click="requserData.nickName = ''"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="性别" prop="gender" borderBottom @click="showSexpicker = true">
					<view class="placeholder-box">
						<text class="txt" v-if="!genderDesc">请选择性别</text>
						<u-icon slot="right" name="arrow-right" :label="genderDesc" labelPos="left" labelSize="13">
						</u-icon>
					</view>
				</u-form-item>
				<view class="title">学校信息</view>
				<u-form-item label="学校信息" labelWidth="80" prop="schoolId" borderBottom @click="handleshowSch">
					<view class="placeholder-box">
						<text class="txt" v-if="!schinfo">请完善学校信息</text>
						<u-icon slot="right" name="arrow-right" :label="schinfo" labelPos="left" labelSize="13">
						</u-icon>
					</view>
				</u-form-item>
				<u-form-item label="年级" prop="grade" borderBottom @click="showGrade = true">
					<view class="placeholder-box">
						<text class="txt" v-if="!gradeDesc">请选择年级</text>
						<u-icon slot="right" name="arrow-right" :label="gradeDesc" labelPos="left" labelSize="13">
						</u-icon>
					</view>
				</u-form-item>
				<view class="title">个人描述</view>
				<view class="desc">个人技能：</view>
				<u-form-item :labelWidth="15" prop="skills" borderBottom>
					<u--textarea id="textArea" v-model="requserData.skills" v-html="requserData.skills" height="150" :maxlength="200"
						border="none" placeholder='填写你的技能( 200字内 )\n如: 1.掌/熟悉 xx 语言/运动'></u--textarea>
				</u-form-item>
				<view class="desc">校内经历：</view>
				<u-form-item :labelWidth="15" prop="exp" borderBottom>
					<u--textarea v-model="requserData.exp" height="150" :maxlength="200" border="none"
						placeholder="填写你的经历( 200字内 )\n如: 1.xx年担任xx部长 / xx年xx比赛一等奖"></u--textarea>
				</u-form-item>
				<view class="desc">自我评价：</view>
				<u-form-item :labelWidth="15" prop="selfdesc" borderBottom>
					<u--textarea  v-model="requserData.selfdesc" height="150" :maxlength="200" border="none"
						placeholder="自我评价( 200字内 )\n如: 性格爱好"></u--textarea>
				</u-form-item>
			</u--form>

		</view>
		<preview v-show="!isEdit" :userinfo="userInfo"> </preview>
		<!-- 选择性别 -->
		<u-picker :columns="sexcolumns" :show="showSexpicker" @cancel="showSexpicker = false" closeOnClickOverlay="true"
			keyName="desc" @close="showSexpicker= false" @confirm="selectSex">
		</u-picker>
		<!-- 选择学校与学院 -->
		<u-picker :show="showSch" ref="uPicker" :columns="columns" @cancel="showSch = false" closeOnClickOverlay="true"
			keyName="sch" :loading="uloading" @close="showSch = false" @confirm="confirm" @change="changeHandler">
		</u-picker>
		<at-grade-picker type="1" :showPicker="showGrade" @confirm="selectGrade" @on-close="showGrade=false">
		</at-grade-picker>
		<view style="height: 220rpx;"></view>
		<at-submit-btn v-show="isEdit" txt="保存" @submit="submit"></at-submit-btn>
	</view>
</template>

<script>
	import AtSubmitBtn from '@/components/AtSubmitBtn'
	import AtGradePicker from '@/components/AtGradePicker'
	import preview from './preview.vue'
	import {
		schoollist,
		deplist,
		updateResume,
		userinfo
	} from "@/common/http.api.js"
	import {
		formatBr
	} from '@/utils/formatBr.js'
	import {
		fomatN
	} from '@/utils/fomatN.js'
	export default {
		components: {
			AtSubmitBtn,
			AtGradePicker,
			preview
		},
		data() {
			return {
				showSexpicker: false,
				showSch: false,
				uloading: false,
				showGrade: false,
				isEdit: true,
				columns: [
					[],
					[]
				],
				columnData: [],
				currschList: [],
				currdepList: [],
				currTab: 0,
				flag: 0,
				sexcolumns: [
					[{
						desc: '男',
						code: 0
					}, {
						desc: '女',
						code: 1
					}]
				],
				list1: [{
					type: '0',
					name: '编辑',
				}, {
					type: '1',
					name: '预览',
				}],
				rules: {
					schoolId: {
						required: true,
						message: '请完善学校信息'
					},
					nickName: {
						required: true,
						message: '请完善名字',
					},
					gender: {
						required: true,
						message: '请完善性别',
						type: 'number'
					},
					grade: {
						required: true,
						message: '请完善年级'
					}
				},
				schinfo: '',
				genderDesc: '',
				gradeDesc: '',
				userInfo: {},
				requserData: {
					exp: "",
					skills: "",
					selfdesc: "",
					userId: '',
					schoolId: null,
					gender: null,
					grade: "",
					nickName: "",
					department: "",
				}
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form2.setRules(this.rules)
		},
		onLoad() {
			this.setSchInfo()
			this.setUserInfo()
		},
		methods: {
			changeTab(item) {
				this.currTab = item.index
				// // 点击tabs切换
				if (this.currTab === 0) {
					this.isEdit = true
				} else {
					this.$refs.form2.validate().then((res) => {
						this.userInfo = this.$store.state.userInfo
						this.isEdit = false
					}).catch((err) => {
						uni.$showMsg('请先完成基本信息与学校信息~', 'none')
						this.$nextTick(() => {
							this.isEdit = true
							this.currTab = 0
						})
					})
				}
			},
			async getuserinfo() {
				let userId = this.$store.state.userId
				const res = await userinfo({
					userId
				})
				this.$store.commit('getUserInfo', res.data)
				// console.log(res.data,'====data===');
				this.userInfo = this.$store.state.userInfo
			},
			setUserInfo() {
				// console.log(this.$store.state.userInfo,'用户信息getUserInfo');
				this.userInfo = this.$store.state.userInfo
				let {
					skills,
					exp,
					selfdesc,
					gender,
					nickName,
					grade,
					schoolId,
					department,
					depName,
					schoolName
				} = this.userInfo
				this.requserData = {
					gender,
					nickName,
					grade,
					schoolId,
					department,
				}
				this.requserData.exp = fomatN(exp)
				this.requserData.skills = fomatN(skills)
				this.requserData.selfdesc = fomatN(selfdesc)
				this.genderDesc = gender == 0 ? '男' : '女'
				
				this.schinfo = department == 0 ? '--' :  schoolName + '-' + depName
				this.gradeDesc = grade == '0' ?  '--' : grade + '级'
					
				
				// console.log(this.requserData);
				
			},
			async submit() {
				this.requserData.userId = this.$store.state.userId
				this.$refs.form2.validate().then(async () => {
					uni.$loading()
					// 处理换行
					this.requserData.selfdesc = formatBr(this.requserData.selfdesc)
					this.requserData.skills = formatBr(this.requserData.skills)
					this.requserData.exp = formatBr(this.requserData.exp)
					const res = await updateResume(this.requserData)
					if (res.code == 0) uni.$showMsg('保存成功')
					await this.getuserinfo()
					this.setUserInfo()
					this.setRatios()
					this.currTab = 1
					this.isEdit = false
				})
			},
			setRatios(){
				let count = 0 // 统计完成率
				for(let k in this.userInfo){
					if(this.userInfo[k]){
						count++
					}
				}
				let ratio = ''
				switch(count){
					case 9 :
					ratio = '80%'
					break;
					case 10 :
					ratio = '90%'
					break;
					case 11 :
					ratio = '100%'
					break;
				}
				this.$store.commit('setRatio',ratio)
			},
			selectSex(arr) {
				this.requserData.gender = arr.value[0].code
				this.genderDesc = arr.value[0].desc
				this.showSexpicker = false
			},
			selectGrade(grade, gradeDesc) {
				this.requserData.grade = grade // 存到一个中转对象
				this.gradeDesc = gradeDesc
				this.showGrade = false
			},
			async setSchInfo() {
				// 初始化默认项
				const resSch = await schoollist({})
				const resDep = await deplist({
					schoolId: '1'
				})
				this.currschList = resSch.data.shift() // 去掉多余
				this.currschList = resSch.data
				console.log(this.currschList);
				this.currdepList = resDep.data
				this.columns[0] = resSch.data.map(i => i.schoolName)
				this.columns[1] = resDep.data.map(i => i.depName)
				this.columnData.push(this.columns[1])
			},
			handleshowSch() {
				this.setSchInfo()
				this.showSch = true
			},
			async changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.uloading = true
					// 改变学校id后重新发请求
					let id = this.currschList.find(i => i.schoolName == value[0]).schoolId
					const res = await deplist({
						schoolId: id
					})
					this.currdepList = res.data
					let depList = res.data.map(i => i.depName) || []
					this.columnData[index] = depList // 第几个改变就是第几个 不能push
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
					this.uloading = false
				}
			},

			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				// console.log('confirm', e)
				this.schinfo = e.value[0] + '-' + e.value[1] // 处理回显
				this.requserData.schoolId = this.currschList.find(i => i.schoolName == e.value[0]).schoolId
				this.requserData.department = this.currdepList.find(i => i.depName == e.value[1]).depId
				this.showSch = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-box {
		background-color: #fff;
		width: 100%;

		/deep/.u-tabs__wrapper__nav__item {
			padding: 0 150rpx;
		}
	}

	.title {
		padding: 30rpx 0 10rpx 0;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.title::before {
		display: inline-block;
		content: '';
		width: 10rpx;
		border-radius: 5rpx;
		height: 35rpx;
		margin-right: 15rpx;
		background: linear-gradient(to left, #5866f5, #4492f0);
	}

	.desc {
		margin-top: 20rpx;
	}

	.content {
		width: 90%;
		margin: auto;

		.input-box {
			display: flex;
			justify-content: space-between;
		}
	}

	.placeholder-box {
		.txt {
			color: #d2cbcf;
			margin-right: 10rpx;
		}

		display: flex;
		justify-content: flex-end;
		font-size: 14px
	}
	/deep/.u-textarea .u-textarea__field {
		white-space: pre-wrap;
	}
	
</style>
